<template>
    <div style="height: 93%;overflow-y: scroll;">
        <div v-for="(item, index) in msgList" :key="index">
            <p style="text-align: center;color: #aaa;">{{ item.showTime }}</p>
            <div :class="item.id == myName ? 'my' : 'you'" style="padding: 10px;">
                <div v-if="item.id !== myName" style="margin: auto;display: inline-block;" class="userHead">
                    <img src="/head.png" alt="" srcset="" style="height: 1.5rem;width: 1.5rem;">
                </div>
                <div style="flex-wrap: wrap;overflow: hidden;display: inline-block;">
                    <span style="color: #666;">{{ item.id }}</span>
                    <p :class="item.id == myName ? 'mytext' : 'youtext'">
                        <span class="text"
                            style="text-align: left;max-width: 100%;display: inline-block;padding: 7px;word-wrap: break-word;">{{
                                item.msg }}</span>
                    </p>
                </div>
                <div v-if="item.id === myName" style="flex:1;margin: auto;padding-left: 1.5rem;display: inline-block;"
                    class="userHead">
                    <img src="/head.png" alt="" srcset="" style="height: 1.5rem;width: 1.5rem;">
                </div>
            </div>
        </div>
    </div>
    <div style="display: flex;height: 7%;">
        <el-input v-model="input" placeholder="" />
        <el-button type="primary" @click="send" style="height: 100%;">发送</el-button>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import emitter from "../../../util/eventBus"
import { userStore } from "../../../store/index"

const store = userStore()
const input = ref('')
let msgList = reactive(store.$state.messageList)
let myName = ref(store.$state.userInfo.username)
const send = () => {
    console.log(input.value);
    emitter.emit("send", input.value)
    input.value = ""
}

</script>

<style scoped lang="scss">
.my {
    text-align: end;
    padding: 10px;
}

.you {
    text-align: start;

}

.mytext {
    padding: 10px;
    padding: 5px;

    .text {
        background-color: #fff;
        border-radius: 5px;
    }
}

.youtext {
    color: #000;
    padding: 5px;

    .text {
        border-radius: 5px;
        background-color: #71e271;
    }
}

.userHead {
    position: relative;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>